<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>日志管理</span>
                <div class="header-right">
                    <el-button type="primary" @click="handleExport">导出日志</el-button>
                    <el-button type="danger" @click="showCleanDialog">清理日志</el-button>
                </div>
            </div>
        </template>

        <!-- 搜索区域 -->
        <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item label="日志类型">
                <el-select v-model="searchForm.type" placeholder="请选择日志类型">
                    <el-option label="操作日志" value="operation" />
                    <el-option label="登录日志" value="login" />
                </el-select>
            </el-form-item>
            <el-form-item label="操作人">
                <el-input v-model="searchForm.username" placeholder="请输入操作人" />
            </el-form-item>
            <el-form-item label="操作时间">
                <el-date-picker
                    v-model="searchForm.timeRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="YYYY-MM-DD"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 日志列表 -->
        <el-table :data="logList" style="width: 100%">
            <el-table-column prop="username" label="操作人" width="120" />
            <el-table-column prop="operation" label="操作内容" />
            <el-table-column prop="ip" label="IP地址" width="120" />
            <el-table-column prop="status" label="状态" width="80">
                <template #default="scope">
                    <el-tag :type="scope.row.status === 'success' ? 'success' : 'danger'">
                        {{ scope.row.status === 'success' ? '成功' : '失败' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="操作时间" width="180" />
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>

        <!-- 清理日志对话框 -->
        <el-dialog title="清理日志" v-model="cleanDialogVisible" width="30%">
            <el-form :model="cleanForm" label-width="100px">
                <el-form-item label="日志类型">
                    <el-select v-model="cleanForm.type" placeholder="请选择要清理的日志类型">
                        <el-option label="操作日志" value="operation" />
                        <el-option label="登录日志" value="login" />
                        <el-option label="全部日志" value="all" />
                    </el-select>
                </el-form-item>
                <el-form-item label="保留天数">
                    <el-input-number v-model="cleanForm.days" :min="30" :max="365" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cleanDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleClean">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    getOperationLogListService,
    getLoginLogListService,
    exportOperationLogService,
    exportLoginLogService,
    cleanLogService
} from '@/api/log.js'

// 搜索表单
const searchForm = ref({
    type: 'operation',
    username: '',
    timeRange: []
})

// 日志列表数据
const logList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 获取日志列表
const getLogList = async () => {
    try {
        const params = {
            page: currentPage.value,
            pageSize: pageSize.value,
            username: searchForm.value.username,
            startTime: searchForm.value.timeRange[0],
            endTime: searchForm.value.timeRange[1]
        }

        const service = searchForm.value.type === 'operation' 
            ? getOperationLogListService 
            : getLoginLogListService

        const res = await service(params)
        logList.value = res.data.list
        total.value = res.data.total
    } catch (error) {
        ElMessage.error('获取日志列表失败')
    }
}

// 搜索
const handleSearch = () => {
    currentPage.value = 1
    getLogList()
}

// 重置搜索
const resetSearch = () => {
    searchForm.value = {
        type: 'operation',
        username: '',
        timeRange: []
    }
    handleSearch()
}

// 分页
const handleSizeChange = (val) => {
    pageSize.value = val
    getLogList()
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    getLogList()
}

// 导出日志
const handleExport = async () => {
    try {
        const params = {
            username: searchForm.value.username,
            startTime: searchForm.value.timeRange[0],
            endTime: searchForm.value.timeRange[1]
        }

        const service = searchForm.value.type === 'operation'
            ? exportOperationLogService
            : exportLoginLogService

        const res = await service(params)
        
        // 创建下载链接
        const blob = new Blob([res.data])
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = `${searchForm.value.type}_log_${new Date().getTime()}.xlsx`
        link.click()
    } catch (error) {
        ElMessage.error('导出日志失败')
    }
}

// 清理日志
const cleanDialogVisible = ref(false)
const cleanForm = ref({
    type: 'all',
    days: 180
})

const showCleanDialog = () => {
    cleanDialogVisible.value = true
}

const handleClean = async () => {
    try {
        await cleanLogService(cleanForm.value.days, cleanForm.value.type)
        ElMessage.success('清理日志成功')
        cleanDialogVisible.value = false
        getLogList()
    } catch (error) {
        ElMessage.error('清理日志失败')
    }
}

onMounted(() => {
    getLogList()
})
</script>

<style scoped>
.page-container {
    padding: 20px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-form {
    margin-bottom: 20px;
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style> 